import {Component, Input} from "@angular/core";
import {Router} from "@angular/router";

@Component({
    selector:"df-menu-panel",
    template:`
        <div class="df-menu-panel-title" *ngIf="menus.group">
            <span class="_ico df-ico-{{menus.icon}}"></span>
            <span>{{menus.group}}</span>
        </div>
        <div class="squared-panel" *ngIf="menus.squared; else flatPanel">
            <div class="df-menu-panel-item-squared" [style.width]="100/menus.squared+'%'" *ngFor="let item of menus.items" (click)="navigateTo(item.url)">
                <span class="_ico df-ico-{{item.icon}}"></span>
                <div style="flex-grow:1;flex-shrink:0;padding-left:10px;">{{item.title}}</div>
            </div>
        </div>
        <ng-template #flatPanel>
            <div class="df-menu-panel-body" >
                <div class="df-menu-panel-item" *ngFor="let item of menus.items" (click)="navigateTo(item.url)">
                    <span class="_ico df-ico-{{item.icon}}"></span>
                    <div style="flex-grow:1;flex-shrink:0;padding-left:10px;">{{item.title}}</div>
                    <div class="df-menu-panel-item-info">{{item.info}}</div>
                    <span class="df-ico-toRight _ico"></span>
                </div>
            </div>
        </ng-template>
    `,
    styles:[
            `
            .df-menu-panel-title{
                line-height:2.5;
                padding-left:10px;
                border-bottom:1px solid var(--borderColor);
            }
            .df-menu-panel-body{
                padding:0 15px;
            }
            .df-menu-panel-item{
                line-height:250%;
                display:flex;
                display:webkit-flex;
                border-bottom:1px solid var(--borderColor);
            }
            .df-menu-panel-item-info{
                padding-right:10px;
                font-size:80%;
                color:var(--infoColor);
            }
            ._ico{
                color:var(--btnDeepColor)
            }
            .squared-panel{
                display:flex;
                display:webkit-flex;
                flex-wrap:wrap;
            }
            .df-menu-panel-item-squared{
                text-align:center;
                padding:10px 0;
                box-sizing: border-box;
                border:1px solid var(--borderColor);
            }
            .df-menu-panel-item-squared ._ico{
                font-size:28px;
            }
        `
    ]
})
export class MenuPanelComponent{
    @Input() menus:any;
    constructor(private route:Router){

    }
    navigateTo(url:string){
        this.route.navigateByUrl(url);
    }
}
